<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑学习内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/content.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/22.css}" media="all">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script th:src="@{/static/js/jquery-1.11.1.js}"></script>
    <style>
        .myBox{
            display: flex;

        }
        .myTip{
            font-size: 16px;
            line-height: 32px;
        }
        .option,.subject{
            border: none;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <input type="hidden" name="menu_topic" id="menu_topic" th:value="${menu_topic}">
    <input type="hidden" name="book_name" id="book_name" th:value="${book_name}">

    <div id="right_page" scrollshow="true" style="position: fixed;height: auto">
        <ul>
            <li><a href="#wrap" class=""><cite>视频</cite></a></li>
            <li><a href="#option" class=""><cite>单选题</cite></a></li>
            <li><a href="#multi-option" class=""><cite>多选题</cite></a></li>
            <li><a href="#fillIn" class=""><cite>填空题</cite></a></li>
            <li><a href="#code" class=""><cite>代码题</cite></a></li>
            <li><a href="#" class=""><cite>顶部</cite></a></li>
        </ul>
    </div>
    <div class="wrap" id="wrap">
        <h3>[[${menu_topic}]]</h3>
        <div class="content">
            <div class="player">
                <video id="video" th:src="'/static'+${videoUrl}">
                    您的浏览器不支持 video 标签。
                </video>
                <div class="control">
                    <!--                进度条-->
                    <div>
                        <span class="progress" id="nodrag"></span>
                        <span class="mask" id="mask"></span>
                    </div>
                </div>

                <div class="controls">
                    <!--                暂停-->
                    <div class="fa fa-play play_pause"></div>
                    <!--                播放时间设置-->
                    <div class="timer">
                        <span class="progress_timer">00:00:00</span>/
                        <span class="duration_timer">00:00:00</span>
                    </div>
                    <!--                倍速-->
                    <div class="selRates">
                        <select id="selRate">
                            <option value="0.5">0.5</option>
                            <option value="1" selected>1.0</option>
                            <option value="1.25">1.25</option>
                            <option value="1.5">1.5</option>
                            <option value="2">2.0</option>
                        </select>
                    </div>
                    <!--                                全屏-->
                    <div class="fa fa-expand expand"></div>
                </div>

            </div>
            <div>
                <div id="upload-video" style="text-align: center">
                    <span class="layui-btn">点击上传/替换视频</span>
                    <input type="text" class="layui-input" name="video" id="videoName" th:type="hidden">
                </div>
                <div id="upload-videolist" class="myBox"></div>
                <button id="videoListAction" name="videoListAction" style="display: none;">点击上传文件</button>
            </div>
            <div>
                <div id="upload-option" style="text-align: center">
                    <span class="layui-btn">导入题目</span>
                    <input type="text" class="layui-input" name="option" id="optionName" th:type="hidden">
                </div>
                <div id="upload-optionlist"></div>
                <button id="optionListAction" name="optionListAction" style="display: none;">点击上传文件</button>
            </div>
        </div>
    </div>
    <!--选择题-->
    <div class="words myBox" id="option">
        <div>
            <span class="myTip">单选题</span>
        </div>
    </div>
    <div id="options">
        <ul th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="1" class="option">
            <form  class="choiceForm">
                <button type="button" onclick="OptionDelete(this)">点击删除</button>
                <button type="button" onclick="OptionUpdate(this)">点击修改</button>
                <button type="button" class="cancelBtn" onclick="OptionCancel(this)" style="display: none">取消修改</button>
                <button type="button" class="commitBtn" onclick="OptionCommit(this)" style="display: none">完成修改</button>
                <br>
                <input type="hidden" name="book_name" th:value="${subject.getBook_name()}">
                <input type="hidden" name="menu_topic" th:value="${subject.getMenu_topic()}">
                <input type="hidden" name="question_number" th:value="${subject.getQuestion_number}">
                <span th:text="'（ ' + ${i.index+1} + ' ）'"></span>
                <input type="text" name="stem" th:value="${subject.getStem()}" class="subject" disabled>
                <br>
                A.<input type="text" name="option_one" th:value="${subject.getOption_one()}" class="option" disabled>
                <br>
                B. <input type="text" name="option_two" th:value="${subject.getOption_two()}" class="option" disabled>
                <br>
                C.  <input type="text" name="option_three" th:value="${subject.getOption_three()}" class="option" disabled>
                <br>
                D.<input type="text" name="option_four" th:value="${subject.getOption_four()}" class="option" disabled>
                <br>
                <li th:text="'知识点： '+${subject.getPoint()} +' &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 难度系数：'+${subject.getFacility()}"
                    class="point-facility">
                </li>
                <span>答案：</span>
                <input type="text"  name="answer" th:value="${subject.getAnswer()}" class="option" disabled>
            </form>
        </ul>
    </div>

    <!--多选题-->
    <div class="multi-words myBox" id="multi-option" >
        <div>
            <span class="myTip">多选题</span>
        </div>
    </div>
    <div id="multi-options">
        <!--    <form action="#" id="multi-answer">-->
        <ul th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="2" class="option">
            <form class="choiceForm2">
                <button type="button" onclick="OptionDelete(this)">点击删除</button>
                <button type="button" onclick="OptionUpdate(this)">点击修改</button>
                <button type="button" class="cancelBtn" onclick="OptionCancel(this)" style="display: none">取消修改</button>
                <button type="button" class="commitBtn" onclick="OptionCommit(this)" style="display: none">完成修改</button>
                <input type="hidden" name="book_name" th:value="${subject.getBook_name()}">
                <input type="hidden" name="menu_topic" th:value="${subject.getMenu_topic()}">
                <input type="hidden" name="question_number" th:value="${subject.getQuestion_number}">

                <br>
                <span th:text="'（ ' + ${i.index+1} + ' ）'"></span>
                <input type="text" name="stem" th:value="${subject.getStem()}" class="subject" disabled>
                <br>
                <input type="text" name="option_one" th:value="A. +' '+ ${subject.getOption_one()}" class="option" disabled>
                <br>
                <input type="text" name="option_two" th:value="B. +' '+${subject.getOption_two()}" class="option" disabled>
                <br>
                <input type="text" name="option_three" th:value="C. +' '+${subject.getOption_three()}" class="option" disabled>
                <br>
                <input type="text" name="option_four" th:value="D. +' '+${subject.getOption_four()}" class="option" disabled>
                <br>
                <li th:text="'知识点： '+${subject.getPoint()} +' &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 难度系数：'+${subject.getFacility()}"
                    class="point-facility">
                </li>
                <span>答案：</span>
                <input type="text" name="answer" th:value="${subject.getAnswer()}" class="option" disabled>

            </form>
        </ul>
        <!--    </form>-->
    </div>

    <!--填空题-->
    <div class="fillIn myBox" id="fillIn" >
        <div>
            <span class="myTip">填空题</span>
        </div>
<!--        <div>-->
<!--            <div id="upload-fillin">-->
<!--                <span class="layui-btn">导入填空题和代码题</span>-->
<!--                <input type="text" class="layui-input" name="option" id="fillinName" th:type="hidden">-->
<!--            </div>-->
<!--            <div id="upload-fillinlist"></div>-->
<!--            <button id="fillinListAction" name="optionListAction" style="display: none;">点击上传文件</button>-->
<!--        </div>-->
    </div>
    <div id="fillIns">
            <div class="fillIn-item" th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="3">
                <form action="#">
                    <button type="button" onclick="OptionDelete(this)">点击删除</button>
                    <button type="button" onclick="OptionUpdate(this)">点击修改</button>
                    <button type="button" class="cancelBtn" onclick="OptionCancel(this)" style="display: none">取消修改</button>
                    <button type="button" class="commitBtn" onclick="OptionCommit(this)" style="display: none">完成修改</button>
                    <input type="hidden" name="book_name" th:value="${subject.getBook_name()}">
                    <input type="hidden" name="menu_topic" th:value="${subject.getMenu_topic()}">
                    <input type="hidden" name="question_number" th:value="${subject.getQuestion_number}">

                    <br>
                    <textarea name="stem" th:text="${subject.getStem()}" disabled class="subject">
                    </textarea>
                    <span>标准答案：</span>
                    <textarea name="answer" th:text="${subject.getAnswer()}" disabled class="option">
                    </textarea>
                </form>
            </div>
    </div>

    <!--代码题-->
    <div class="code myBox" id="code" >
        <div>
            <span class="myTip">代码题</span>
        </div>
    </div>
    <div id="codes">
        <div class="code-item" th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="4">
            <form action="#">
                <button type="button" onclick="OptionDelete(this)">点击删除</button>
                <button type="button" onclick="OptionUpdate(this)">点击修改</button>
                <button type="button" class="cancelBtn" onclick="OptionCancel(this)" style="display: none">取消修改</button>
                <button type="button" class="commitBtn" onclick="OptionCommit(this)" style="display: none">完成修改</button>
                <input type="hidden" name="book_name" th:value="${subject.getBook_name()}">
                <input type="hidden" name="menu_topic" th:value="${subject.getMenu_topic()}">
                <input type="hidden" name="question_number" th:value="${subject.getQuestion_number}">

                <br>
                <textarea name="stem" th:text="${subject.getStem()}" disabled class="subject">
                </textarea>
                <span>标准答案：</span>
                <textarea name="answer" th:text="${subject.getAnswer()}" disabled class="option">
                </textarea>
            </form>
        </div>
         <br/>
    </div>

    <!--相关文件下载-->
    <div class="code myBox" id="file" >
        <div>
            <span class="myTip">课件上传下载</span>
        </div>
        <div>
            <div id="upload-ppt">
                <span class="layui-btn">点击上传ppt</span>
                <input type="text" class="layui-input" name="ppt" id="pptName" th:type="hidden">
            </div>
            <div id="upload-pptlist"></div>
            <button id="pptListAction" name="pptListAction" style="display: none;">点击上传课件</button>

        </div>
    </div>
    <div id="files">
        <!--    <div id="item" th:text="${fileUrl}"></div>-->
        <a th:href="'/static'+${fileUrl}" download
           style="padding: 20px;margin-top: 10px;color: forestgreen;">本章节课件下载</a>
    </div>
</div>
<script th:src="@{/static/js/fireWork.js}"></script>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/js/webuploader.js}"></script>
<!--处理修改，删除-->
<script>
layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use('index');
function OptionDelete(document){
    console.log(document)
    let form=$(document).parent()
    console.log(form.serializeArray())
    layer.confirm('是否要删除题目!', {
            btn: ['确定', '取消']
        }, function (index, layero) {
            layer.closeAll('dialog');  //加入这个信息点击确定 会关闭这个消息框
            $.ajax({
                type: "get",
                url: "/back/subject/delete",
                dataType: 'JSON',
                async: false,
                data: form.serialize(),
                success(Msg){
                    if(Msg.code==100){
                        layer.msg("删除成功!",{ icon: 1, time: 1000 });
                        setTimeout(()=>{
                            window.location.reload()
                        },1000)
                    }else  layer.msg("操作失败")
                }
            })

        }
    );


}
let copy_stem=null
let copy_one=null
let copy_two=null
let copy_three=null
let copy_four=null
let copy_answer=null
function OptionUpdate(document){
    let form=$(document).parent()
    let cancelBtn=form.find($(".cancelBtn"))
    let commitBtn=form.find($(".commitBtn"))
    cancelBtn.css("display","inline")
    commitBtn.css("display","inline")
    form.children().removeAttr("disabled")
    let formData=form.serializeArray();
    $(formData).each(function (index,value){
        // console.log(value.name)
        // console.log(value.value)
        switch (value.name) {
            case "stem":
                copy_stem=value.value
                break;
            case "option_one":
                copy_one=value.value
                break;
            case "option_two":
                copy_two=value.value
                break;
            case "option_three":
                copy_three=value.value
                break;
            case "option_four":
                copy_four=value.value
                break;
            case "answer":
                copy_answer=value.value
                break;
        }
    })
}
function OptionCancel(document){
    let form=$(document).parent()
    let inputArray =form.find(".subject,.option");
    $(inputArray).each(function (index,value){
        // console.log(value.name)
        switch (value.name) {
            case "stem":
                value.value = copy_stem
                break;
            case "option_one":
                value.value = copy_one
                break;
            case "option_two":
                value.value = copy_two
                break;
            case "option_three":
                value.value =  copy_three
                break;
            case "option_four":
                value.value =  copy_four
                break;
            case "answer":
                value.value = copy_answer
                break;
        }
    })
    let cancelBtn=form.find($(".cancelBtn"))
    let commitBtn=form.find($(".commitBtn"))
    cancelBtn.css("display","none")
    commitBtn.css("display","none")
    // console.log(inputArray)
    inputArray.attr("disabled","disabled")

}
function OptionCommit(document){
    let form=$(document).parent()
    $.ajax({
        type: "get",
        url: "/back/subject/update",
        dataType: 'JSON',
        async: false,
        data: form.serialize(),
        success(Msg){
            if(Msg.code==100){
                layer.msg("修改成功!",{ icon: 1, time: 1000 });
                setTimeout(()=>{
                    window.location.reload()
                },1000)
            }else  layer.msg("操作失败")
        }
    })

}

</script>
<!--点击事件-->
<script>

    var title = document.getElementById('title1');
    var select = document.getElementById("select1");

    function myclick(res) {
        console.log(res)
        // alert("click")
        user_options = ""
        var select = document.getElementById('select'+res)
        if (select.style.display == 'none'){
            select.style.display = 'block'
        }else {
            //获取当前多选的选项
            var multiOption = document.getElementsByName("multi-option"+res)
            //获取用户选择的选项组合成字符串
            for (i in multiOption){
                if ( multiOption[i].checked){
                    user_options += multiOption[i].value + ","
                }
            }
            //将用户选择的选项组合成的字符串赋值到input中
            document.getElementById("answer"+res).value = user_options

            select.style.display = 'none'

            //在前端响应用的选择
            if (user_options != ""){
                var tip = document.getElementById("tip"+res)
                tip.style.padding = "5px"
                //将结尾的最后一个“，”去掉
                tip.innerText = "你的选择为：" + user_options.substring(0,user_options.length-1)
            }
        }
    }

    // 单选题的赋值到input
    function optionChange(data){
        //获取点击的select的id
        var option = document.getElementById("option"+data)
        //获取选择的选项
        var answer = option.options[option.selectedIndex].value
        //将选择的选项赋值到input中
        document.getElementById("option_answer"+data).value = answer
    }
</script>

<!--视频播放-->
<script>
    var videoObj = document.querySelector('video')
    var playBtn = document.querySelector('.play_pause')
    var progressTimer = document.querySelector('.progress_timer')
    var durationTimer = document.querySelector('.duration_timer')
    var progress = document.querySelector('.progress')
    var player = document.querySelector('.player')
    var expand = document.querySelector('.expand')
    //设置倍速
    var eleSelect = document.getElementById('selRate');
    var eleButton = document.getElementById('btnPlay');
    // 视频元素
    var video = document.getElementById("video");
    //进度条
    var nodrag = document.getElementById("nodrag");

    var flagTime = 0;

    var duration = $('#duration').val()
    console.log("时间：")
    console.log(duration)
    duration = 4;
    console.log(duration)

    // 0.实现播放按钮
    // 1.获取所需要的元素
    // 2.点击播放按钮控制视频的播放
    // 3.切换为暂停按钮
    // 4.点击暂停按钮实现暂停
    // 5.实现切换
    playBtn.addEventListener('click', function(){
        if(videoObj.paused){
            // 如果视频处于播放状态
            videoObj.play()
            this.classList.remove('fa-play')
            this.classList.add('fa-pause')
        }else{
            videoObj.pause()
            this.classList.add('fa-play')
            this.classList.remove('fa-pause')
            console.log(flagTime)
            $.ajax({
                url: '/content/studentVideo',
                type: 'POST',
                async: false,
                dataType: "JSON",
                data: {
                    chapterNo:chapterNo,
                    duration:flagTime
                },
                success:function (result) {
                    console.log(result)
                }
            })
        }
    })

    // 0.实现时间
    // 1.获取所需的元素
    // 2.时间格式为：hh:mm:ss
    // 3.获取总时间，并格式化
    // 4.获取当前视频时间，并格式化
    // 5.渲染到页面
    let {totalT,presentT} = {totalT:0,presentT:0}
    videoObj.addEventListener('canplay',function(){
        totalT = this.duration
        //视频总时间
        var videoDuration = formatTime(totalT)
        durationTimer.innerHTML = videoDuration
    })

    videoObj.addEventListener('timeupdate',function(){
        presentT = this.currentTime
        if (presentT >= duration){
            var videoCurrent = formatTime(presentT)
        }
        else{
            var videoCurrent = formatTime(duration)
            presentT = duration;
        }
        flagTime = presentT
        // console.log(videoCurrent)
        progressTimer.innerHTML = videoCurrent
        //0.实现进度条
        //1.获取所需元素
        //2.根据时间来实现百分比
        var percent = presentT/totalT*100
        progress.style.width = percent+'%'

        if (videoObj.currentTime == videoObj.duration){
            videoObj.pause()
            playBtn.classList.add('fa-pause')
            playBtn.classList.remove('fa-play')
        }

    })

    function formatTime(t){
        var h = parseInt(t/3600)
        h = h<10?'0'+h:h
        var m = parseInt(t%3600/60)
        m = m<10?'0'+m:m
        var s = parseInt(t%60)
        s = s<10?'0'+s:s
        return h+':'+m+':'+s
    }

    //拖拉进度条
    nodrag.addEventListener('click',function (e) {
        var present = videoObj.currentTime
        videoObj.currentTime = e.offsetX/videoObj.clientWidth * videoObj.duration
        present = videoObj.currentTime

    })

    // 0.实现全屏
    expand.addEventListener('click',function(){
        player.webkitRequestFullScreen();
    })

    // 改变播放速率
    eleSelect.addEventListener('change', function () {
        var options = $("#selRate option:selected"); //获取选中的项
        video.playbackRate = options.val();

    })
</script>


<!--交互数据-->
<script>
    var book_name = $('#book_name').val()
    var menu_topic = $('#menu_topic').val()

    //单选题
    function option() {
        //获取表单的值
        var arr = $('#option-form').serializeArray();

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/option/"+book_name+"/"+menu_topic+"/1",
            dataType: 'JSON',
            async: false,
            // data: arr,
            data: JSON.stringify(arr),
            success: function (result) {
                if (result.code != 200){
                    console.log(result);
                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        //除去选项
                        document.getElementById(name).remove()
                        //获取显示标签
                        var success = name.replace(/option/,"success")
                        //设置显示标签的的style
                        document.getElementById(success).style.display = 'inline-block'
                        document.getElementById(success).style.float = 'right'
                        document.getElementById(success).style.marginTop = '-30px'
                        if(result.payload[i].judge == '√')
                            document.getElementById(success).style.color = 'green'
                        else
                            document.getElementById(success).style.color = 'red'
                        var show = "你的答案: " + arr[i].value +"   " + result.payload[i].judge
                        document.getElementById(success).innerText = show;
                    }

                    document.getElementById("option-btn").remove()

                }
            }
        })

    }


    //多选题
    function multiOption() {

        //获取input的值 name为answer的值
        var arrs = $(".multi-option[name^='answer']").serializeArray();

        console.log(arrs)
        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/option/"+book_name+"/"+menu_topic+"/2",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arrs),
            success: function (result) {
                if (result.code != 200){
                    console.log(result);
                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        name = "tip"+name.substr(6,2)
                        //除去选项
                        document.getElementById(name).remove()
                        //获取显示标签
                        var success = name.replace(/tip/,"success")
                        //设置显示标签的的style
                        document.getElementById(success).style.display = 'inline-block'
                        document.getElementById(success).style.float = 'right'
                        document.getElementById(success).style.marginTop = '10px'
                        if(result.payload[i].judge == '√')
                            document.getElementById(success).style.color = 'green'
                        else
                            document.getElementById(success).style.color = 'red'
                        var show = "你的答案: " + arrs[i].value +"   " + result.payload[i].judge
                        document.getElementById(success).innerText = show;
                    }
                    document.getElementById("multi-submit").remove()

                }
                return false;
            }
        })
    }


    //填空题和代码题
    function fillIn() {
        //获取input的值 name为answer的值
        var arr = $('#fillIn-form').serializeArray();
        console.log(arr)

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/fillIn/"+book_name+"/"+menu_topic+"/3",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arr),
            success: function (result) {
                console.log(result)
                for (var i=0; i<result.code; i++){
                    var name = result.payload[i].name
                    var names = "fillIn"+name.substr(6,2)

                    //创建span
                    var span = document.createElement("span")
                    span.id = "success"+name.substr(6,2)
                    span.style.color = "red"
                    span.innerText = "已经提交，等待批改"


                    // textArea.append(div)
                    document.getElementById(names).after(span)
                    console.log("append")

                    //除去选项
                    document.getElementById(names).disabled = true

                }
                document.getElementById("fillIn-submit").remove()
            }
        })

    }

    //代码题
    function code() {
        //获取input的值 name为answer的值
        var arr = $('#code-form').serializeArray();
        console.log(arr)

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/fillIn/"+chapterNo+"/4",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arr),
            success: function (result) {
                console.log(result)
                if (code != 200){

                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        var names = "code"+name.substr(4,2)

                        //创建span
                        var span = document.createElement("span")
                        span.id = "success"+name.substr(4,2)
                        span.style.color = "red"
                        span.innerText = "已经提交，等待批改"


                        // textArea.append(div)
                        document.getElementById(names).after(span)
                        console.log("append")

                        //除去选项
                        document.getElementById(names).disabled = true

                    }
                    document.getElementById("code-submit").remove()
                }

            }
        })

    }


</script>

<!--视频文件的上传-->
<script>

    $('#upload-video').click(function(event) {
        $("#videoListAction").find('input').click();
    });

    var book_name = $("#book_name").val()
    var menu_topic = $("#menu_topic").val()

    var uploader = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/video/upload/'+book_name+"/"+menu_topic,// 文件接收服务端。
        dnd: '#upload-video',
        pick: '#videoListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        // fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        // fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
    })

    uploader.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-videolist').append(html);
        uploader.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader.on('uploadSuccess', function(file, response) {
        //更新input框中的文件
        var front = $('#videoName').val()
        var videoName = front + file.lastModifiedDate +"." + file.ext + ","
        $('#videoName').val(videoName)
        console.log(file.id+"传输成功");
        layer.msg("上传成功")
        setTimeout( ()=>{
            window.location.reload();
        },1000)

    });

    //上传失败
    uploader.on('uploadError', function(file) {
        //更新input框中的文件
        var file_name = file.name
        var videoName = file_name
        var front = $('#videoName').val()
        var frontList = front.split(",");
        var videoNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( videoName != frontList[i] ){
                videoNames += frontList[i] + ",";
            }
        }
        $("#videoName").val(videoNames)
        console.log(file);
        console.log(file.id+'upload error')
        layer.msg("上传失败")
    });

    //将文件删除
    $('#upload-videolist').on('click', '.upload-item .btn-delete', function(file) {

        //更新input框中的文件
        var file_name = $(this).data('file_name')
        var videoName = file_name
        var front = $('#videoName').val()
        var frontList = front.split(",");
        var videoNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( videoName != frontList[i] ){
                videoNames += frontList[i] + ",";
            }
        }
        $("#videoName").val(videoNames)

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        //打印文件
        // console.log(uploader.getFiles());
        // console.log(file_id)
        // console.log(file_name)
        // console.log(file.ext)
    });
    //文件的重传
    $('#upload-videolist').on('click', '.btn-retry', function() {
        uploader.retry($(this).data('file_id'));
    });

    uploader.on('uploadComplete', function(file) {
        console.log(uploader.getFiles());
    });
</script>

<!--ppt文件上传-->
<script>

    var chapterNo = $("#chapterNo").val()

    $('#upload-ppt').click(function(event) {
        $("#pptListAction").find('input').click();
    });

    var uploader2 = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/video/fileUpload/'+book_name+"/"+menu_topic,// 文件接收服务端。
        // dnd: '#upload-ppt',
        pick: '#pptListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        // fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        // fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
    })

    uploader2.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader2.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-pptlist').append(html);
        uploader2.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader2.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader2.on('uploadSuccess', function(file, response) {
        //更新input框中的文件
        var front = $('#pptName').val()
        var pptName = front + file.lastModifiedDate +"." + file.ext + ","
        $('#pptName').val(pptName)
        console.log(file.id+"传输成功");
        layer.msg("上传成功")
        setTimeout( ()=>{
            window.location.reload();
        },1000)
    });

    //上传失败
    uploader2.on('uploadError', function(file) {
        //更新input框中的文件
        var file_name = file.name
        var pptName = file_name
        var front = $('#pptName').val()
        var frontList = front.split(",");
        var pptNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( pptName != frontList[i] ){
                pptNames += frontList[i] + ",";
            }
        }
        $("#pptName").val(pptNames)
        console.log(file);
        console.log(file.id+'upload error')
        layer.msg("上传失败")
    });

    //将文件删除
    $('#upload-pptlist').on('click', '.upload-item .btn-delete', function(file) {

        //更新input框中的文件
        var file_name = $(this).data('file_name')
        var pptName = file_name
        var front = $('#pptName').val()
        var frontList = front.split(",");
        var pptNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( pptName != frontList[i] ){
                pptNames += frontList[i] + ",";
            }
        }
        $("#pptName").val(pptNames)

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader2.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        //打印文件
        // console.log(uploader.getFiles());
        // console.log(file_id)
        // console.log(file_name)
        // console.log(file.ext)
    });

    //文件的重传
    $('#upload-pptlist').on('click', '.btn-retry', function() {
        uploader2.retry($(this).data('file_id'));
    });

    uploader2.on('uploadComplete', function(file) {
        console.log(uploader2.getFiles());
    });
</script>

<!--导入题目-->
<script>

    $('#upload-option').click(function(event) {
        $("#optionListAction").find('input').click();
    });
    var uploader2 = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/excelUpload/importSubject/'+book_name+"/"+menu_topic,       // 文件接收服务端。
        // dnd: '#upload-ppt',
        pick: '#optionListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
        accept: 'file',
    })

    uploader2.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file.exit); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader2.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-optionlist').append(html);
        uploader2.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader2.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader2.on('uploadSuccess', function(file, response) {
        console.log(file.id+"传输成功");
        window.location.reload();

    });

    //上传失败
    uploader2.on('uploadError', function(file) {
        console.log(file);
        console.log(file.id+'upload error')
        layer.msg("上传失败")
    });

    //将文件删除
    $('#upload-optionlist').on('click', '.upload-item .btn-delete', function(file) {

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader2.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        打印文件
        console.log(uploader.getFiles());
        console.log(file_id)
        console.log(file_name)
        console.log(file.ext)
    });

    //文件的重传
    $('#upload-optionlist').on('click', '.btn-retry', function() {
        uploader2.retry($(this).data('file_id'));
    });

    uploader2.on('uploadComplete', function(file) {
        console.log(uploader2.getFiles());
    });
</script>

<!--&lt;!&ndash;导入填空题&ndash;&gt;-->
<!--<script>-->

<!--    var chapterNo = $("#chapterNo").val()-->

<!--    $('#upload-fillin').click(function(event) {-->
<!--        $("#fillinListAction").find('input').click();-->
<!--    });-->
<!--    var uploader2 = WebUploader.create({-->
<!--        auto: true,// 选完文件后，是否自动上传。-->
<!--        // swf: '/static/Uploader.swf',// swf文件路径-->
<!--        server: '/excelUpload/importFillin/'+book_name+"/"+menu_topic,       // 文件接收服务端。-->
<!--        // dnd: '#upload-ppt',-->
<!--        pick: '#fillinListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id-->
<!--        multiple: true, // 选择多个-->
<!--        chunked: true,// 开启分片上传。-->
<!--        threads: 1, // 上传并发数。允许同时最大上传进程数。-->
<!--        method: 'POST', // 文件上传方式，POST或者GET。-->
<!--        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。-->
<!--        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。-->
<!--        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。-->
<!--        accept: 'file',-->
<!--    })-->

<!--    uploader2.on("beforeFileQueued", function(file) {-->
<!--        // 更改文件名，以时间戳命名-->
<!--        console.log(file); // 获取文件的后缀-->
<!--        var timestamp = Date.parse(new Date())-->
<!--        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)-->
<!--        console.log(file.name)-->
<!--    });-->

<!--    uploader2.on('fileQueued', function(file) {-->
<!--        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等-->
<!--        console.log(file.ext); // 获取文件的后缀-->
<!--        console.log(file.size);// 获取文件的大小-->
<!--        console.log(file.name);-->
<!--        console.log(file.id);-->
<!--        console.log(file.lastModifiedDate)-->

<!--        //截取单纯的文件名-->

<!--        var html = '<div class="upload-item" id="'+file.id+'">' +-->
<!--            '<span>文件名：'+file.name+'</span>' +-->
<!--            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +-->
<!--            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+-->
<!--            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +-->
<!--            '</div>';-->
<!--        $('#upload-fillinlist').append(html);-->
<!--        uploader2.md5File( file )//大文件秒传-->
<!--            // 及时显示进度-->
<!--            .progress(function(percentage) {-->
<!--                console.log('Percentage:', percentage);-->
<!--            })-->

<!--            // 完成-->
<!--            .then(function(val) {-->
<!--                console.log('md5 result:', val);-->
<!--            });-->
<!--    });-->

<!--    //上传进度显示-->
<!--    uploader2.on('uploadProgress', function(file, percentage) {-->
<!--        console.log(percentage * 100 + '%');-->
<!--        var width = $('.upload-item').width();-->
<!--        $('.'+file.id).width(width*percentage);-->
<!--    });-->

<!--    //上传成功-->
<!--    uploader2.on('uploadSuccess', function(file, response) {-->
<!--        //更新input框中的文件-->
<!--        console.log(file.id+"传输成功");-->
<!--        window.location.reload();-->
<!--    });-->

<!--    //上传失败-->
<!--    uploader2.on('uploadError', function(file) {-->

<!--        console.log(file);-->
<!--        console.log(file.id+'upload error')-->
<!--        layer.msg("上传失败")-->
<!--    });-->

<!--    //将文件删除-->
<!--    $('#upload-fillinlist').on('click', '.upload-item .btn-delete', function(file) {-->

<!--        // 从文件队列中删除某个文件id-->
<!--        var file_id = $(this).data('file_id');-->
<!--        // uploader.removeFile(file_id); // 标记文件状态为已取消-->
<!--        uploader2.removeFile(file_id, true); // 从queue中删除-->

<!--        //将文件从文件列表中删除-->
<!--        var obj = document.getElementById(file_id)-->
<!--        obj.parentNode.removeChild(obj)-->

<!--    });-->

<!--    //文件的重传-->
<!--    $('#upload-fillinlist').on('click', '.btn-retry', function() {-->
<!--        uploader2.retry($(this).data('file_id'));-->
<!--    });-->

<!--    uploader2.on('uploadComplete', function(file) {-->
<!--        console.log(uploader2.getFiles());-->
<!--    });-->
<!--</script>-->




</body>
</html>